<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>login_checkPic_frame</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style type="text/css">
    body,html{
        background: transparent;
    }
        #classify {
            color: #ffffff !important;
        }
        .addressSection{
          background: #fff;
        }

        .addressTitle{
          width: 100%;
          height: 92px;
          position: fixed;
          left: 0px;
          border-radius: 15px 15px 0 0;
          box-shadow:0px -10px 15px rgba(140,140,140,0.5);
          z-index: 9000;
        }
        .aui-media-list .aui-list-item-inner{
           height: 92px;
           padding-top: 20px;
        }
        .aui-list .aui-list-item{
               padding-left: 20px;
        }
        .addressTitltName{
          font-size: 20px!important;
          font-weight: bold;
        }
        .loacalPic{
          width: 30px;
          margin: 0 15px 0 0;
        }
        .aui-list-item-text{
          font-weight: 600;
        }
        .aui-list .aui-list-item {
             background-image: linear-gradient(0,transparent,transparent 50%,transparent 50%);
             background-image: -webkit-linear-gradient(90deg,transparent,transparent 50%,transparent 50%);
        }
        .slidesBottom{
           animation: slidesBottom  .3s ease forwards;
        }
        .slidesUp {

        }
        @keyframes slidesBottom {
        from {top:700px;}
        to {top:0px;}
        }
        /*适配屏幕320px*/
        @media (max-width: 320px){
          .aui-list-item-text{
              font-size: 10px!important;
          }
      	}
        /*适配屏幕320px*/
    </style>
</head>
<body>
    <section class="aui-content aui-margin-b-10 addressSection" id="mapPage" v-bind:style="{height:wHeight}">
        <ul class="aui-list aui-media-list addressTitle" id="mapPageFooter" @click="showAddressList()"
          v-bind:style="{top:wTop}" v-bind:class="{slidesBottom:showMask1,slidesUp:showMask2}">
            <li class="aui-list-item aui-list-item-middle">
                <div class="aui-media-list-item-inner">
                    <div class="loacalPic" >
                        <img src="../../image/main/myLoacaltion@2x.png" class="aui-img-round" >
                    </div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title addressTitltName">半坡国际艺术区</div>
                        </div>
                        <div class="aui-list-item-text">
                          纺织城 灞桥区 纺织城西街 138号
                        </div>
                    </div>
                </div>
            </li>
            <li class="aui-list-item aui-list-item-middle">
                <div class="aui-media-list-item-inner">
                    <div class="loacalPic" >
                        <img src="../../image/main/myLoacaltion@2x.png" class="aui-img-round" >
                    </div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title addressTitltName">半坡国际艺术区</div>
                        </div>
                        <div class="aui-list-item-text">
                          纺织城 灞桥区 纺织城西街 138号
                        </div>
                    </div>
                </div>
            </li>
            <li class="aui-list-item aui-list-item-middle">
                <div class="aui-media-list-item-inner">
                    <div class="loacalPic" >
                        <img src="../../image/main/myLoacaltion@2x.png" class="aui-img-round" >
                    </div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title addressTitltName">半坡国际艺术区</div>
                        </div>
                        <div class="aui-list-item-text">
                          纺织城 灞桥区 纺织城西街 138号
                        </div>
                    </div>
                </div>
            </li>
            <li class="aui-list-item aui-list-item-middle">
                <div class="aui-media-list-item-inner">
                    <div class="loacalPic" >
                        <img src="../../image/main/myLoacaltion@2x.png" class="aui-img-round" >
                    </div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title addressTitltName">半坡国际艺术区</div>
                        </div>
                        <div class="aui-list-item-text">
                          纺织城 灞桥区 纺织城西街 138号
                        </div>
                    </div>
                </div>
            </li>
            <li class="aui-list-item aui-list-item-middle">
                <div class="aui-media-list-item-inner">
                    <div class="loacalPic" >
                        <img src="../../image/main/myLoacaltion@2x.png" class="aui-img-round" >
                    </div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title addressTitltName">半坡国际艺术区</div>
                        </div>
                        <div class="aui-list-item-text">
                          纺织城 灞桥区 纺织城西街 138号
                        </div>
                    </div>
                </div>
            </li>
            <li class="aui-list-item aui-list-item-middle">
                <div class="aui-media-list-item-inner">
                    <div class="loacalPic" >
                        <img src="../../image/main/myLoacaltion@2x.png" class="aui-img-round" >
                    </div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title addressTitltName">半坡国际艺术区</div>
                        </div>
                        <div class="aui-list-item-text">
                          纺织城 灞桥区 纺织城西街 138号
                        </div>
                    </div>
                </div>
            </li>
            <li class="aui-list-item aui-list-item-middle">
                <div class="aui-media-list-item-inner">
                    <div class="loacalPic" >
                        <img src="../../image/main/myLoacaltion@2x.png" class="aui-img-round" >
                    </div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title addressTitltName">半坡国际艺术区</div>
                        </div>
                        <div class="aui-list-item-text">
                          纺织城 灞桥区 纺织城西街 138号
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </section>
  </body>
<script type="text/javascript" src="../../script/api.js" ></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/fastclick.js"></script>
<script type="text/javascript">
    apiready = function () {
      api.setFrameAttr({
          bgColor: 'transparent'
          });
    }
    ////初始化页面
    var app = new Vue({
        el: '#mapPage',
        data: {
            wHeight: '',
            wTop : '',
            locationLat : '',
            locationLon : '',
            showMask1 : false,
            showMask2 : false
        },
        methods:{
          init: function() {
            /////初始化页面高度
              var wh = document.documentElement.clientHeight || document.body.clientHeight;
              var mapPageFooterH = document.getElementById('mapPageFooter').offsetHeight;
                  this.wHeight = (wh-mapPageFooterH) + 'px';
                  this.wTop = this.wHeight;
             },
             showAddressList : function(){
                  this.showMask1 = !this.showMask1;
             }
         },
         mounted: function() {
             this.init();

         }
    });
    var mapPageMethod = {
        initMothed : function(){
        }
    }
</script>
</html>
